<template>
  <div class="search">
    <div class="search-form">
      <div
        class="search-form-item"
        v-for="(property, index) in myValuePropertyArray"
        :key="index"
      >
        <el-tooltip
          class="item"
          effect="dark"
          :content="value[property].label"
          placement="left-start"
        >
          <general
            v-model="value[property].value"
            v-bind="value[property]"
            :component-name="value[property].componentName"
          ></general>
        </el-tooltip>
      </div>
    </div>
    <div class="search-button">
      <!-- 按钮集合 -->
      <buttonGroup :buttonGroups="buttonGroups" />
    </div>
  </div>
</template>

<script>
import general from "@/components/general/index";
import buttonGroup from "@/components/button/group";

export default {
  components: {
    buttonGroup: buttonGroup,
    general: general,
  },
  props: {
    // 选中项绑定值
    buttonGroups: {
      type: Array,
    },
    value: {
      type: Object,
      required: true,
    },
  },
  created() {},
  computed: {
    myValuePropertyArray() {
      let value = this.value;
      let propertyArray = [];

      // 遍历属性
      for (var property in value) {
        if (value[property]["componentName"].toKebabCase() == "form-hidden") {
          continue;
        }

        propertyArray.push(property);

        delete value[property]["itemWidth"];
        delete value[property]["itemContentWidth"];

        // 初始化未指定值的搜索项总宽度
        if (
          Object.prototype.toString.call(value[property]["placeholder"]) ===
          "[object Undefined]"
        ) {
          let label = value[property].label;
          value[property]["placeholder"] = "请输入" + label;
        }
      }

      return propertyArray;
    },
    // 当前视图的路由地址
    routerPath() {
      return this.$router.history.current.fullPath;
    },
  },
};
</script>

<style >
.search {
  min-height: 36px;
}
.search-form {
  float: left;
}

.search-form-item {
  margin-left: 8px;
  float: left;
}

.search-form-item .el-input__inner,
select,
.el-date-editor {
  height: 34px !important;
}

.search-form-item .el-select .el-input__icon {
  line-height: 34px !important;
}
.search-form-item .el-date-editor .el-input__icon,
.el-range-separator {
  line-height: 27px !important;
}
.search-form-item .el-input__icon {
  width: 24px !important;
}

.search-button {
  margin-left: 10px;
  margin-top: 3px;
  /* line-height: 30px;  */
  float: left;
}
</style>
